﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Voice Recording</title>

    <script src="../scripts/js/jquery.min.js" type="text/javascript"></script>

    <script src="../scripts/js/jRecorder.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../css/popup.css"/>

</head>
<body>
    <form id="form1" runat="server">
    <%--<asp:TextBox runat="server" ID="txtEmail" MaxLength="120" Width="198px" />
    &nbsp;<asp:Button runat="server" Text="Test" Width="90px" ID="btnEmailTest" OnClick="btnEmailTest_Click" />
    <br />
    <asp:Label runat="server" ID="lblEmailTestResult" />
    <asp:RequiredFieldValidator ControlToValidate="txtEmail" ErrorMessage="<br/>Required email address!"
        runat="server" ID="rfvEmail" />
    <asp:RegularExpressionValidator ControlToValidate="txtEmail" ErrorMessage="<br/>Invalid email address!"
        runat="server" ID="revEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
    <br />--%>
    
    <div id="header">
<a href="/" target="_parent"><img src="/images/other/spacer.png" width="225" height="69" alt="Teledirect" style="border:0;" /></a></div>
<div class="content">
<h2>Voice Recording</h2>
    <div style="width: 200px" runat="server" id="divRecording">
        <asp:Panel ID="pnlRecorder" runat="server" GroupingText="Recorder">
        <div style="background-color: #eeeeee; border: 1px solid #cccccc">
            Time: <span id="time">00:00</span>
        </div>
        <div>
            Level: <span id="level"></span>
        </div>
        <div id="levelbase" style="width: 200px; height: 20px; background-color: #000000">
            <div id="levelbar" style="height: 19px; width: 2px; background-color: blue">
            </div>
        </div>
        <div>
            Status: <span id="status"></span>
        </div>
        <div>
        </div>
        <input type="button" id="record" value="Record" style="color: red" />
        <input type="button" id="stop" value="Done" disabled="disabled" />
        </asp:Panel>
    </div>
    <div runat="server" id="divThankYou" visible="false">
        <h2 style="color: Blue">
            Thank you. Your voice recording file was submitted successfully.</h2>
    </div>
    
    <div runat="server" id="divButton" visible="false">
        <asp:HyperLink runat="server" ID="hplDownload" Target="_blank" />
        <br />
        <asp:Button runat="server" ID="btnSubmit" Text="Submit My Last Recorded Voice" OnClick="btnSubmit_Click" />
         or 
         <asp:Button runat="server" ID="btnRecordNew" Text="Start another new recording" OnClick="btnRecordNew_Click" />
        <br />
    </div>
    <div runat="server" id="divParagraph">
        <h2 style="color: Red">
            Click 'Record' button and read out following paragraph. You got 1 minutes.
        </h2>
        <h1>
            Teledirect Opens a New Telesales Center in Jalan Ampang Kuala Lumpur</h1>
        Teledirect is glad to announce the opening of a 100 seats purpose built telesales
        center for one of the world&#39;s largest banks in Jalan Ampang Kuala Lumpur.
        <br />
        &nbsp;&nbsp;&nbsp;
        <br />
        The State-of-the-art contact center confirms a growing trend among banks to want
        to outsource while retaining control over their telesales activities and that Teledirect
        is the preferred vendor for that purpose.
        <br />
        <br />
        Within a period of 3 months, Teledirect identified and negotiated the site, developed
        specifications in close consultation with the bank, renovated and installed the
        latest outbound telephony infrastructure from Aspect and recruited and trained 100
        personnel.
        <br />
        <br />
        The results are no downtime in revenue generation for the bank and its insurance
        partners and a fully dedicated center ready to innovate and improve performance.
        <br />
        <br />
        Costs are within control and the center leverages Teledirect&#39;s shared services
        such as Quality Assurance, Technology support, Training, Human Resources and Strategic
        Consulting.
    </div></div>
    </form>
</body>

<script type="text/javascript">
    var durationTime = 0;

    $.jRecorder({
        host: 'default.aspx?filename=hello.wav',  //replace with your server path please
        callback_started_recording: function() { callback_started(); },
        callback_stopped_recording: function() { callback_stopped(); },
        callback_activityLevel: function(level) { callback_activityLevel(level); },
        callback_activityTime: function(time) { callback_activityTime(time); },
        callback_finished_sending: function(time) { callback_finished_sending() },
        swf_path: '../scripts/jRecorder.swf'
    }
   );

    $('#stop').attr('disabled', 'disabled');

    $('#record').click(function() {
        //alert($('#record').text());
        //alert($('#record').val());
        if ($('#record').val() == "Record") {
            $.jRecorder.record(60);
            $('#record').val("New");
            $('#stop').removeAttr('disabled');
        }
        else if ($('#record').val() == "New") {
            if (confirm('Are you sure to record new?')) {
                location.reload();
            }
        }
    })

    $('#stop').click(function() {
        $.jRecorder.stop();
        $('#stop').attr('disabled', 'disabled');

    })

    $('#send').click(function() {
        if (confirm('Are you sure to upload voice recording?')) {
            $('#stop').attr('disabled', 'disabled');
            $('#record').attr('disabled', 'disabled');

            $('#status').html('Saving recording audio.');

            setTimeout(function() {
                location.reload();
            }, 3000);
        }
    })

    function callback_finished() { $('#status').html('Recording is finished'); }

    function callback_started() { $('#status').html('Recording is started'); }

    function callback_error(code) { $('#status').html('Error, code:' + code); }

    function callback_stopped() {
        $('#stop').attr('disabled', 'disabled');
        $.jRecorder.sendData();
        $('#status').html('Playing preview and saving..');
        setTimeout(function() {
            $('#status').html('Completing..');
            setTimeout(function() {
                location.reload();
            }, 1000);

        }, (durationTime * 1000) + 2000);
    }

    function callback_finished_recording() {
        $('#status').html('Finished recording.');
    }

    function callback_finished_sending() {
        //$('#status').html('Saving recording audio.');

        //setTimeout(function() {
        //    location.reload();
        //}, 3000);
    }

    function callback_activityLevel(level) {
        $('#level').html(level);

        if (level == -1) {
            $('#levelbar').css("width", "2px");
        }
        else {
            $('#levelbar').css("width", (level * 2) + "px");
        }
    }

    function callback_activityTime(time) {
        //$('.flrecorder').css("width", "1px"); 
        //$('.flrecorder').css("height", "1px");
        $('#time').html(time);
        durationTime = time;
    }
</script>

</html>
